<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>校长信箱-云校通-教师</title>
<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
<body ontouchstart id="xsqj">
	<div class="weui_tab tab-bottom">
		<div class="weui_tab_bd">
	        <!--TAB切换-->
	        <div class="weui_tab" id="tab4">
	            <div class="weui_navbar">
	                <div class="weui_navbar_item" id="">
	                   	 未回复（<span id="replyingCount"></span>）
	                </div>
	                <div class="weui_navbar_item" id="auditedTable">
	                                                     已回复
	                </div>
	            </div>
	            <div class="weui_tab_bd">
			        <div class="weui_panel weui_tab_bd_item mt0" id="replying">
			        	<div id="replyingList">
			        	</div>
			        	<div class="dropload-down">
				        	<div class="loadData dropload-hasData">点击加载更多数据...</div>
				        </div>
			        </div>
			        <div class="weui_panel weui_tab_bd_item mt0" id="replyed">
			       		<div id="replyedList">
			        	</div>
			        	<div class="dropload-down">
				        	<div class="loadData dropload-hasData">点击加载更多数据...</div>
				        </div>
			        </div>
	            </div>
	        </div>
	        <!--EndTAB切换-->
		</div>
	</div>
	
	<div style="display:none;" class="weui_mask weui_mask_visible" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);"></div>
	<div style="display:none;" class="weui_dialog weui_dialog_visible" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
		<div class="weui_dialog_hd">
			<strong class="weui_dialog_title">请输入回复内容</strong>
		</div>
		<div class="weui_dialog_bd">
			<textarea class="weui_input weui-prompt-input f-red" style="height: 100px;width: 100%;" rows="10" id="rejectText"></textarea>
		</div>
		<div class="weui_dialog_ft">
			<a href="javascript:;" id="rejectCancel" class="weui_btn_dialog default">取消</a>
			<a href="javascript:;" id="rejectSure" class="weui_btn_dialog primary">确定</a>
		</div>
	</div>
	
	<script id="noReply-table-template" type="text/x-handlebars-template">
		{{#each rows}}
		<div class="weui_panel_bd">
           <div class="weui_cell">
            	<div class="weui_cell_hd">
            		<img alt="" class="circle bg-blue-b" style="width:50px;margin-right:10px;display:block" src="${config.imgUrl}/{{headImgUrl}}">
            	</div>
            	<div class="weui_cell_bd weui_cell_primary">
                	<p class="f-green">{{studentName}}的家长 {{gradeName}}({{clazz}})班</p>
            	</div>
        	</div>
            <a href="javascript:void(0);" class="weui_media_box weui_media_appmsg" style="padding: 10px 15px;">
               
               <div class="weui_media_bd">
				   <p class="paragraph f-14 pr10" style="line-height: 25px;">{{problem}}</p>
			       <!-- 伸张链接 -->
			       <span class="paragraphExtender f-blue">全文</span>
                   {{#if attachList}}
				   <div class="weui-flex">
						<div class="mailbox">
						{{#each attachList}}
                   			<img onclick="imgClick1(this)" src="${config.imgUrl}{{attachmentUrl}}">
                   		{{/each}}
						</div>
                   </div>
				   {{/if}}
                   <p class="weui_media_desc" style="line-height: 2;">
                   		{{dateFormat createTime}}
						<span class="f-blue right replay" onclick="rejectSubmit(this,{{id}})"> <i class="icon icon-80"></i>  回复</span>
					</p>
				   {{#if isReply}}
                   <div class="liketext"><p class="f-black repay_line"><span class="f-blue">{{teacherName}}老师：</span>{{reply}}</p></div>
				   {{/if}}
				</div>
            </a>
       </div>
	   {{/each}}
	</script>
	
	<script id="replyed-table-template" type="text/x-handlebars-template">
		{{#each rows}}
		<div class="weui_panel_bd">
           <div class="weui_cell">
            	<div class="weui_cell_hd">
            		<img alt="" class="circle bg-blue-b" style="width:50px;margin-right:10px;display:block" src="${config.imgUrl}/{{headImgUrl}}">
            	</div>
            	<div class="weui_cell_bd weui_cell_primary">
                	<p class="f-green">{{studentName}}的家长 {{gradeName}}({{clazz}})班</p>
            	</div>
        	</div>
            <a href="javascript:void(0);" class="weui_media_box weui_media_appmsg" style="display:block;">
               
               <div class="weui_media_bd">
                   <p class="paragraph f-14 pr10" style="line-height: 25px;">{{problem}}</p>
			       <!-- 伸张链接 -->
			       <span class="paragraphExtender f-blue">全文</span>
                   {{#if attachList}}
				   <div class="weui-flex">
						<div class="mailbox">
						{{#each attachList}}
                   			<img onclick="imgClick1(this)" src="${config.imgUrl}{{attachmentUrl}}">
                   		{{/each}}
						</div>
                   </div>
				   {{/if}}
                   <p class="weui_media_desc" style="line-height: 2;">
                   		{{dateFormat createTime}}
					</p>
				   {{#if isReply}}
                   <div class="liketext">
					<p class="f-black repay_line">
						{{#equal teacherId ${user.teacher.id}}}
						<span class="icon icon-116" onclick="rejectSubmit(this,{{id}})"></span>
						{{/equal}}
						<span class="f-blue">{{teacherName}}老师：</span><span class="reply">{{reply}}</span>
					</p>
				   </div>
				   {{/if}}
				</div>
            </a>
       </div>
	   {{/each}}
	</script>
</body>
<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
<script>
	var whf_page = 1, yhf_page = 1, whf_size = 5, yhf_size = 5;
	var isLoadAudited = false;
	$(function() {
		loadReplyingList();
		//loadReplyedList();
		$('#tab4').tab({
			defaultIndex: 0,
			activeClass: "tab-blue "
		});
		$("#auditedTable").click(function() {
			if(!isLoadAudited){
				loadReplyedList();
			}
		})
		$(".dropload-hasData").click(function() {
			if($(this).closest(".weui_panel").attr("id") == 'replying') {
				loadReplyingList();
			}else {
				loadReplyedList();
			}
		})
		
	});
	function rejectSubmit(thiz,id) {
		var parent = $(thiz).closest(".weui_panel_bd");
		$("#rejectText").val(parent.find(".reply").html());
		$(".weui_mask").show();
		$(".weui_dialog").show();
		$("#rejectCancel").click(function(){
			$("#rejectText").val(null);
			$(".weui_mask").hide();
			$(".weui_dialog").hide();
		});
		$("#rejectSure").click(function(){
			var text = $("#rejectText").val();
			if(text.trim().length > 0) {
	      		var params = {
	      			id: id,
	      			reply: text
	      		}
	      		replySubmit(params, parent);
	      	}
			$(".weui_mask").hide();
			$(".weui_dialog").hide();
		});
	}
	function replySubmit(params, parent) {
		$.ajax({
          	url : basePath + "/ls/mailbox/principal/reply",
  	 		type : "post",
  	 		dataType : "json",
  	 		data : params,
            success: function(data){
            	if(data.code == '000') {
            		parent.remove();
            		var rc = parseInt($("#replyingCount").html());
            		if(rc > 0) rc -= 1;
            		$("#replyingCount").html(rc);
            		$.toast("回复成功");
            		setTimeout(function() {
            			window.location.reload();
            		}, 1000 );
            		return;
            	}
            	$.toptips(data.msg);
            },
            error: function(xhr, type){
              
            }
         });
	}
	function loadReplyingList(reload) {
		if(reload) whf_page = 1;
		var params = {
			page: whf_page,
  	 		rows: whf_size,
  	 		isReply: 0	
		};	            
       	$.ajax({
          	url : basePath + "/mailbox/principal/page/query",
  	 		type : "post",
  	 		dataType : "json",
  	 		data : params,
            success: function(data){
            	 $("#replyingCount").html(data.total);
            	 if(data.rows.length == 0 || params.page*params.rows >= data.total) {// 如果没有数据
            		 $("#replyingList").closest(".weui_panel").find('.loadData').removeClass("dropload-hasData").addClass("dropload-noData").html("没有更多数据了");
                 	 if(data.rows.length == 0) return;
            	 }
            	 loadnoReplyMailboxHtml(data, reload, "replyingList")
            	 paragraph1();
            	 whf_page++;
            },
            error: function(xhr, type){
                 
               }
          });
	}
	
	function loadReplyedList(reload) {
		if(reload) yhf_page = 1;
		isLoadAudited = true;
		var params = {
			page: yhf_page,
  	 		rows: yhf_size,
  	 		isReply: 1
		};	            
       	$.ajax({
          	url : basePath + "/mailbox/principal/page/query",
  	 		type : "post",
  	 		dataType : "json",
  	 		data : params,
            success: function(data){
            	 if(data.rows.length == 0 || params.page*params.rows >= data.total) {// 如果没有数据
            		 $("#replyedList").closest(".weui_panel").find('.loadData').removeClass("dropload-hasData").addClass("dropload-noData").html("没有更多数据了");
                 	 if(data.rows.length == 0) return;
                 }
            	 loadReplyedMailboxHtml(data, reload);
            	 paragraph1();
            	 yhf_page++;
            },
            error: function(xhr, type){
                 
               }
          });
	}
	
	function loadnoReplyMailboxHtml(data, reload){
  		if(data.rows.length > 0) {
  			var myTemplate = Handlebars.compile($("#noReply-table-template").html());
  			Handlebars.registerHelper("equal", function(v1,v2,options) {
  				if(v1 == v2) {
  					//满足添加继续执行
  					return options.fn(this);
  				}else {
  					//不满足条件执行{{else}}部分
  					return options.inverse(this);
  				}
  			});
  			Handlebars.registerHelper("dateFormat", function(v1) {
  				return getTime(v1, "yyyy-MM-dd hh:mm:ss");
  			});
  			if(reload) {
  				$('#replyingList').html(myTemplate(data));
  			}else {
  				$('#replyingList').append(myTemplate(data));
  			}
  		}
	}
	
	function loadReplyedMailboxHtml(data, reload){
  		if(data.rows.length > 0) {
  			var myTemplate = Handlebars.compile($("#replyed-table-template").html());
  			Handlebars.registerHelper("equal", function(v1,v2,options) {
  				if(v1 == v2) {
  					//满足添加继续执行
  					return options.fn(this);
  				}else {
  					//不满足条件执行{{else}}部分
  					return options.inverse(this);
  				}
  			});
  			Handlebars.registerHelper("dateFormat", function(v1) {
  				return getTime(v1, "yyyy-MM-dd hh:mm:ss");
  			});
  			if(reload) {
  				$('#replyedList').html(myTemplate(data));
  			}else {
  				$('#replyedList').append(myTemplate(data));
  			}
  		}
	}
	
	function imgClick1(thiz) {
		var obj = $(thiz.closest(".weui-flex")).find("img");
		var src = get_img(obj);
		var currSrc = thiz.src;
		var current;
		for(var i in src) {
			if(src[i] == currSrc) {
				current = i;
				break;
			}
		}
		img_preview(src[current], src);
	}
	function img_preview(current, urls){
        if(!current || urls.length == 0){
	        return ;
        }

        WeixinJSBridge.invoke('imagePreview', { 
            'current': current,
            'urls': urls
        }); 
	}
	function get_img(obj){
		var m = [];
		for(var i=0; i<obj.length; i++){
			m[i] = obj[i].src;
		}
		return m;
	}
</script>
</html>